<template>
	<view class="home">
		<nvb/>
		<view class="index_banner_box">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000">
				<swiper-item v-for="(item,index) in top_banner" :key="index">
					<image class="banner" :src="item.img_url"></image>
				</swiper-item>
			</swiper>
			
		</view>
		<cnv/>
		<view class="online_box">
			<image  class="online_img" :src="index_banner"></image>
		</view>
	</view>
	
</template>

<script>
	import nvb from "@/components/nvb/nav-bar.nvue"
	import cnv from "@/components/coursenv/coursenv.vue"
	export default {
		data() {
			return {
				top_banner:[],
				index_banner:""
			}
		},
		methods: {
		},
		comments:{
		},
		components:{
			nvb,cnv
		},
		mounted() {
			uni.request({
				url:"http://html5.bjsxt.cn/api/index/banner",
				// 默认的success方法无效，需要success:(data)=>类型才行
						success:(data)=> {
							console.log(data)
							this.index_banner = data.data.index_banner.img_url
							this.top_banner=data.data.top_banner
						}
			})
		}
	}
</script>

<style>
	.home{
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		.index_banner_box{
			display: flex;
			overflow: hidden;
			width: 100%;
			padding: 5rpx;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
		.swiper{
			width: 100%;
			height: 260rpx;
			.banner {
				width: 100%;
				height: 260rpx;
			}
		}
		.online_box{
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			overflow: hidden;
			margin-bottom: 15px;
			.online_img{
				width: 100%;
				height: 132rpx;
			}
		}
	}
</style>
